const colorList = [
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 1,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(51,192,205,0.01)', // 0% 处的颜色
      },
      {
        offset: 1,
        color: 'rgba(51,192,205,0.57)', // 100% 处的颜色
      },
    ],
    globalCoord: false, // 缺省为 false
  },
  {
    type: 'linear',
    x: 1,
    y: 0,
    x2: 0,
    y2: 1,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(115,172,255,0.02)', // 0% 处的颜色
      },
      {
        offset: 1,
        color: 'rgba(115,172,255,0.67)', // 100% 处的颜色
      },
    ],
    globalCoord: false, // 缺省为 false
  },
  {
    type: 'linear',
    x: 1,
    y: 0,
    x2: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(158,135,255,0.02)', // 0% 处的颜色
      },
      {
        offset: 1,
        color: 'rgba(158,135,255,0.57)', // 100% 处的颜色
      },
    ],
    globalCoord: false, // 缺省为 false
  },
  {
    type: 'linear',
    x: 0,
    y: 1,
    x2: 0,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(252,75,75,0.01)', // 0% 处的颜色
      },
      {
        offset: 1,
        color: 'rgba(252,75,75,0.57)', // 100% 处的颜色
      },
    ],
    globalCoord: false, // 缺省为 false
  },
  {
    type: 'linear',
    x: 1,
    y: 1,
    x2: 1,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(253,138,106,0.01)', // 0% 处的颜色
      },
      {
        offset: 1,
        color: '#FDB36ac2', // 100% 处的颜色
      },
    ],
    globalCoord: false, // 缺省为 false
  },
  {
    type: 'linear',
    x: 0,
    y: 0,
    x2: 1,
    y2: 0,
    colorStops: [
      {
        offset: 0,
        color: 'rgba(254,206,67,0.12)', // 0% 处的颜色
      },
      {
        offset: 1,
        color: '#FECE4391', // 100% 处的颜色
      },
    ],
    globalCoord: false, // 缺省为 false
  },
];
const colorLine = [
  '#33C0CD',
  '#73ACFF',
  '#9E87FF',
  '#FE6969',
  '#FDB36A',
  '#FECE43',
];

function getRich() {
  const result: Record<string, any> = {};
  colorLine.forEach((v, i) => {
    result[`hr${i}`] = {
      backgroundColor: colorLine[i],
      borderRadius: 3,
      width: 3,
      height: 3,
      padding: [3, 3, 0, -12],
    };
    result[`a${i}`] = {
      padding: [-11, 6, -20, 6],
      color: colorLine[i],
      backgroundColor: 'transparent',
      fontSize: 12,
    };
  });
  return result;
}

export default function getBar2(purposeDistList: any[] = []) {
  if (purposeDistList) {
    purposeDistList.forEach((v, i) => {
      v.labelLine = {
        lineStyle: {
          width: 1,
          color: colorLine[i],
        },
      };
    });
  }

  return {
    series: [
      {
        type: 'pie',
        radius: '80%',
        center: ['50%', '50%'],
        clockwise: true,
        avoidLabelOverlap: true,
        label: {
          show: true,
          position: 'outside',
          formatter: (params: any) => {
            const { name } = params;
            const percent = `${params.percent}%`;
            const index = params.dataIndex;
            return [`{a${index}|${name}：${percent}}`, `{hr${index}|}`].join(
              '\n'
            );
          },
          rich: getRich(),
        },
        itemStyle: {
          color: (params: any) => {
            return colorList[params.dataIndex];
          },
        },
        data: purposeDistList,
        roseType: 'radius',
      },
    ],
  };
}
